<template>
  <div class="test_box_voice">
    <div class="voice">
      <img
        class="play"
        @click="play"
        src="@/assets/img/testing/icon-video-jiance.svg"
        alt=""
      />
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="value"
        :format="format"
      ></el-progress>
    </div>
    <!-- 能否听见音乐 -->
    <div class="problem">点击播放按钮，能否听见音乐？</div>
    <div class="choose_button">
      <el-button @click="chooseStatus(1)" :class="status == 1 ? 'active' : ''"
        >可以听到</el-button
      >
      <el-button @click="chooseStatus(2)" :class="status == 2 ? 'active' : ''"
        >不能听到</el-button
      >
    </div>
    <!-- 提示 -->
    <div class="tips" v-if="status == 2">
      <p>听不到声音？看不到绿色音量条波动？试试如下方法：</p>
      <p>1、若是外接扬声器，试试换个插口重新插入</p>
      <p>2、尝试重启电脑</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      status: 0,
      audio: null,
      audio2: null,
    };
  },
  mounted() {
    this.getMedia();
  },
  destroyed() {
    this.audio.pause();
    this.audio2.pause();
    this.audio = null;
    this.audio2 = null;
  },
  methods: {
    format(percentage) {
      return "";
    },
    play() {
      this.audio.play();
      this.audio2.play();

      let oCtx = new AudioContext();
      let audioSrc = oCtx.createMediaElementSource(this.audio);
      let scriptProcessor = oCtx.createScriptProcessor(4096, 1, 1);
      audioSrc.connect(scriptProcessor);
      scriptProcessor.connect(oCtx.destination);

      scriptProcessor.onaudioprocess = (e) => {
        let buffer = e.inputBuffer.getChannelData(0);
        let maxVal = Math.max.apply(Math, buffer);
        this.value = Math.round(maxVal * 100);
        console.log(this.value);
      };

      // let audioContext = new AudioContext();
      // let analyser;

      // analyser = audioContext.createAnalyser();
      // analyser.fftSize = 256;
      // let audioSrc = audioContext.createMediaElementSource(this.audio); //从audio中获取声音源文件
      // audioSrc.connect(analyser);
      // analyser.connect(audioContext.destination);
      // setInterval(() => {
      //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
      //   analyser.getByteFrequencyData(dataArray);
      // }, 100);
    },
    chooseStatus(item) {
      this.status = item;
      //   可以看到
      if (item == 1) {
        this.$emit("sysStatus", true);
      } else {
        //   不可以看到
        this.$emit("sysStatus", false);
      }
    },
    getMedia() {
      let mp3 = require("../../../assets/audio/001.mp3");
      let audio = new Audio(mp3);
      let audio2 = new Audio(mp3);
      this.audio = audio;
      this.audio2 = audio2;
    },
  },
};
</script>

<style lang="scss" scoped>
.test_box_voice {
  box-sizing: border-box;
  min-height: 400px;
  .voice {
    display: flex;
    align-items: center;
    .play {
      width: 50px;
      height: 50px;
      margin-right: 14px;
      cursor: pointer;
    }
    .el-progress {
      width: 500px;
    }
    .el-select-dropdown__item {
      // padding: 0 10px;
    }
  }
  .problem {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
    padding-left: 64px;
  }
  .choose_button {
    padding-left: 64px;
    font-size: 0;
    margin-top: 13px;
    button {
      display: inline-block;
      height: 29px;
      width: 137px;
      margin-right: 50px;
      line-height: 29px;
      padding-top: 0;
      padding-bottom: 0;
      cursor: pointer;

      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
    .active {
      background: #475aa7;
      border: solid 1px #475aa7;
      color: #ffffff;
    }
  }
  .tips {
    margin-top: 30px;
    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 18px;
    }
  }
}
</style>

